<template>
	<w-container>
		<w-navbar navType="default" id="my-nav" bgColor="#f5f5f5">
			<w-tabs slot='center' line-width="28" :itemStyle='{width:"200rpx"}' :tabList="tabList" @change="changeTab"></w-tabs>
			<w-icon slot='right' name="search3" size="24" @click="$u.route('/pages/consignments/search',{'status':status,'goods_type':goods_type})"></w-icon>
		</w-navbar>
		<w-tabs :tabList="tabList2" :lineWidth="0" :itemStyle="{'height':'46px'}" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" @change="changeTab2"></w-tabs>
		<view class="plr-16 pb-13 mt-10">
			<block v-for="(item,idx) in list" :key="idx">
				<myConsignmentsItem :item="item" :goods_type="goods_type" @refresh="refresh"></myConsignmentsItem>
			</block>
			<!-- 加载 -->     
			<w-loading :type="loadingType" emptyType="search" class="mt-12" emptyTop="100"></w-loading>
		</view>
	</w-container>   
</template>

<script>
	import { myConsignment } from '@/api/collection/index.js';
	import myConsignmentsItem from'./componens/my-consignments-item.vue';
	export default {
		components:{ myConsignmentsItem },
		data() {
			return {
				tabList:[
					{ type:2,name:'数字藏品' },
					{ type:1,name:'盲盒' }
				],
				tabList2:[
					{ name:'全部',type:'' },
					{ name:'寄售中',type:'1' },
					{ name:'已成交',type:'2' } 
				], 
				inactiveStyle:{
					color: '#666',
					fontSize: '14px'
				},
				activeStyle:{
					color: '#FF2D23',
					fontWeight: '500',
					fontSize: '16px' 
				},
				status:'',
				goods_type:2,
				page:1,
				loadingType:'none',
				isNext:true,
				list:[]
			};
		},
		created() {
			this.getList();
		},
		methods:{
			changeTab(e){
				this.goods_type = e.type;
				this.refresh()
			},
			changeTab2(e){
				this.status = e.type;
				this.refresh()
			},
			// 刷新
			refresh() {
				this.loadingType = 'none';
				this.isNext = true;
				this.list = [];
				this.page = 1;
				this.getList() 
			},
			getList() {
				if(!this.isNext) return;
				this.loadingType = 'loading';
				myConsignment({
					status:this.status,
					goods_type:this.goods_type,
					page:this.page
				}).then(res=>{
					uni.stopPullDownRefresh()
					let { data,last_page } = res.data;
					this.list = [...this.list,...data];
					if(this.page<last_page){
						this.page++;
					}else{
						this.isNext = false;
						this.loadingType = 'nomore';
					}
					!data.length && (this.loadingType = 'empty');
				}).catch(()=>{})
			}
		},
		onPullDownRefresh() {
			this.refresh()
		},
		
		onReachBottom() {
			this.getList();
		}
	}
</script>

<style lang="scss">
	#sticky /deep/ .u-sticky__content {
		background-image: url($IMG_URL + '@/static/bg/my-bg.png');
		background-position: top;
		background-size: 100% auto;
	}
	/deep/ .u-tabs__wrapper__nav__item {
		flex-grow: 1;
	}
	
	/deep/ .u-navbar__content {
		// background-image: url($IMG_URL + '/static/bg/my-bg.png');
		width: 100% !important;
		background-size: cover;
	}
	
	/deep/ .u-tabs__wrapper__nav {
		// background-image: url($IMG_URL + '/static/bg/my-bg.png');
		background-size: 100% auto;
		background-position: top;
	}
	

</style>
